---
title: Etiqueta
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Componente para categorizar o etiquetar contenido visualmente.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| "Props"     | Tipo      | Descripción                                                                                                                                                                 |
| ----------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| "className" | cadena    | "Nombre opcional para estilización adicional"                                                                                                                               |
| color       | cadena    | Color de la etiqueta. Las opciones incluyen: `verde`, `turquesa`, `cielo`, `azul`, `púrpura`, `rosa`, `rojo`, `naranja`, `amarillo`, `gris` |
| texto       | "cadena"  | El contenido de la etiqueta                                                                                                                                                 |
| alHacerClic | "función" | Función opcional llamada cuando un usuario hace clic en la etiqueta                                                                                                         |

</Tab>

</Tabs>
